<template>
    <div>
        <el-row>
            <el-col :span="4">
                <div class="crumbs">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/main/' }" class="a">房源基建</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/main/first' }" class="b">楼栋管理</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
            </el-col>
            <el-col :span="1">
                <el-button  size="small" @click="dialogFormVisible=true" class="btn3"><div class="temptx">添加楼栋</div></el-button>
            </el-col>
        </el-row>
        <el-container>
            <el-main class="std" >
                <el-table
                    :data="buildingData"
                    style="width: 100%  ;"
                    stripe>
                    <el-table-column
                        prop="yqBuildings"
                        label="所在园区"
                        width:406px>
                        <template slot-scope="scope">
                            {{formatYq(scope.row.yqBuildings)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="nameBuildings"
                        label="楼栋名称"
                        width:406px>
                    </el-table-column>
                    <el-table-column
                        prop="floorsBuildings"
                        label="楼层数量"
                        width:200px>
                    </el-table-column>
                    <el-table-column
                        prop="typeBuildings"
                        label="房间类型"
                        width:200px>
                    </el-table-column>
                    <el-table-column
                        type="index"
                        :index="indexMethod"
                        label="房间总数"
                        width=200px>
                    </el-table-column>
                    <el-table-column
                        type="index"
                        :index="indexMethod2"
                        label="床位总数"
                        width=200px>
                    </el-table-column>
                    <el-table-column
                        prop="address"
                        label="操作"
                        width:260px>
                        <template slot-scope="scope">
                            <el-button @click="edit(scope.row)" type="text" size="small" >编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
            <el-footer class="std2" >
                <el-pagination class="btm_choseBox"
                               background
                               @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               :current-page="query.PageNo"
                               :page-sizes="[10,20,50,100]"
                               :page-size="query.pagesize"
                               layout="total, sizes, prev, pager, next"
                               :total="total">
                </el-pagination>
            </el-footer>
        </el-container>
        <el-dialog title="添加楼栋" :visible.sync="dialogFormVisible" width="30%" >
            <el-form label-position="top" :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-row>
                    <el-form-item label="所在园区" prop="yq">
                        <el-select v-model="ruleForm.yq" placeholder="请选择">
                            <el-option
                                v-for="item in yqData"
                                :label="item.nameYq"
                                :value="item.idYq"
                                :key="item.idYq">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="楼栋名称：" prop="name">
                        <el-input v-model="ruleForm.name" placeholder="请输入楼栋编号"></el-input>
                    </el-form-item>
                    <el-form-item label="楼层：" prop="floor">
                        <el-input v-model="ruleForm.floor" placeholder="请输入楼层"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="面向对象：" prop="liver">
                            <el-select v-model="ruleForm.liver" placeholder="请选择">
                                <el-option label="学生" value="学生"></el-option>
                                <el-option label="老师" value="老师"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="面向性别：" prop="gender">
                            <el-select v-model="ruleForm.gender" placeholder="请选择性别">
                                <el-option label="男" value="男性"></el-option>
                                <el-option label="女" value="女性"></el-option>
                                <el-option label="不限" value="不限"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="联系方式：" prop="telephone">
                            <el-input class="input1" v-model="ruleForm.telephone" placeholder="请输入联系方式"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="物业单位信息：" prop="REC">
                            <el-input  v-model="ruleForm.REC" style="width: 100%" placeholder="请输入物业单位信息"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="楼管姓名；" prop="M_name">
                            <el-input  v-model="ruleForm.M_name" placeholder="请输入楼管姓名"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-form-item class="btn2">
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="quitdl()">取消</el-button>
                    </el-form-item>
                </el-row>
            </el-form>
        </el-dialog>
        <el-dialog title="楼栋信息编辑" :visible.sync="dialogFormVisible1" width="30%" >
            <el-form label-position="top" :inline="true" :model="editBuilding" label-width="100px">
                <el-row>
                    <el-form-item label="所在园区" prop="yq">
                        <el-select v-model="editBuilding.yqBuildings" placeholder="请选择" :disabled="true">
                            <el-option
                                v-for="item in yqData"
                                :label="item.nameYq"
                                :value="item.idYq"
                                :key="item.idYq">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="楼栋名称：" prop="id">
                        <el-input v-model="editBuilding.nameBuildings" placeholder="请输入楼栋名称"></el-input>
                    </el-form-item>
                    <el-form-item label="楼层：" prop="floor">
                        <el-input v-model="editBuilding.floorsBuildings" placeholder="请输入楼层"></el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="面向对象：" prop="liver">
                            <el-select v-model="editBuilding.objectBuildings" placeholder="请选择">
                                <el-option label="学生" value="学生"></el-option>
                                <el-option label="老师" value="老师"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="面向性别：" prop="gender">
                            <el-select v-model="editBuilding.genderBuildings" placeholder="请选择性别">
                                <el-option label="男" value="男性"></el-option>
                                <el-option label="女" value="女性"></el-option>
                                <el-option label="不限" value="不限"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="联系方式：" prop="telephone">
                            <el-input class="input1" v-model="editBuilding.phonenumBuildings" placeholder="请输入联系方式"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="物业单位信息：" prop="REC">
                            <el-input  v-model="editBuilding.wydwxxBuildings" style="width: 100%" placeholder="请输入物业单位信息"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="楼管姓名；" prop="M_name">
                            <el-input  v-model="editBuilding.bdmanagerBuildings" placeholder="请输入楼管姓名"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-form-item class="btn2">
                        <el-button type="primary" @click="submitEdit()">提交</el-button>
                        <el-button @click="quitdl()">取消</el-button>
                    </el-form-item>
                </el-row>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import {
  buildingList,
  room4BuildingsList,
  bed4BuildingsList,
  insertBuildings,
  editBuilding,
  yqList
} from '../../../../api/user'

export default {
  name: 'second',
  data () {
    return {
      dialogFormVisible: false,
      dialogFormVisible1: false,
      query: {
        idBuildings: '',
        yqBuildings: '',
        nameBuildings: '',
        floorsBuildings: '',
        typeBuildings: '',
        PageNo: 1,
        pagesize: 10
      },
      total: 0,
      query2: {
        idBuildings: '',
        roomNumber: ''
      },
      query3: {
        idBuildings: '',
        bedNumber: ''
      },
      query4: {
        idYq: '',
        nameYq: ''
      },
      yqData: [],
      buildingData: [],
      roomNumbers: [],
      bedNumbers: [],

      extraInfo: {
        nameBuildings: '',
        floorsBuildings: '',
        yqBuildings: '',
        typeBuildings: '',
        objectBuildings: '',
        genderBuildings: '',
        phonenumBuildings: '',
        wydwxxBuildings: '',
        bdmanagerBuildings: ''
      },

      ruleForm: {
        yq: '',
        name: '',
        floor: '',
        liver: '',
        gender: '',
        telephone: '',
        REC: '',
        M_name: '',
        A_name: ''
      },
      rules: {
        yq: [
          {required: true, message: '请选择园区', trigger: 'blur'}
        ],
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        floor: [
          { pattern: /^[1-9]\d*$/, required: true, message: '请输入楼层,为整数', trigger: 'blur' },
          {min: 1, max: 2, message: '楼层不大于99', trigger: 'blur'}
        ],
        liver: [
          {required: true, message: '选择对象', trigger: 'change'}
        ],
        gender: [
          {required: true, message: '选择性别', trigger: 'change'}
        ],
        telephone: [
          { pattern: /^[1-9]\d*$/, required: true, message: '请输入楼层', trigger: 'blur' },
          {max: 13, message: '输入有效电话号码', trigger: 'blur'}
        ],
        REC: [
          {required: true, message: '输入物业信息', trigger: 'blur'}
        ],
        M_name: [
          {required: true, message: '请输入管理员信息', trigger: 'blur'},
          {min: 1, max: 4, message: '请输入有效姓名', trigger: 'blur'}
        ]
      },
      editBuilding: {}
    }
  },

  methods: {
    submitEdit () {
      editBuilding(this.editBuilding).then(res => {
        if (res.data) {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          this.dialogFormVisible1 = false
          this.getBuildingList()
        } else {
          this.$message({
            type: 'warning',
            message: '修改失败，原因未知，请联系管理员'
          })
        }
      })
    },
    formatYq (yq) {
      let n0 = ''
      for (var i = 0; i < this.yqData.length; i++) {
        if (this.yqData[i].idYq === yq) { n0 = this.yqData[i].nameYq; break }
      }

      return n0
    },
    edit (row) {
      this.editBuilding = JSON.parse(JSON.stringify(row))
      this.dialogFormVisible1 = true
    },
    getYqList () {
      yqList(this.query4).then(res => {
        this.yqData = res.data.records
      })
    },
    getBuildingList () {
      buildingList(this.query).then(res => {
        this.buildingData = res.data.records
        this.total = res.data.total
      })
    },
    getRoomNumber () {
      room4BuildingsList(this.query2).then(res => {
        this.roomNumbers = res.data
      })
    },
    getBedNumber () {
      bed4BuildingsList(this.query3).then(res => {
        this.bedNumbers = res.data
      })
    },
    indexMethod (index) {
      let n0 = 0
      for (var i = 0; i < this.roomNumbers.length; i++) {
        if (this.roomNumbers[i].idBuildings === this.buildingData[index].idBuildings) { n0 = this.roomNumbers[i].roomNumber; break }
      }
      return n0
    },
    indexMethod2 (index) {
      let n0 = 0
      for (var i = 0; i < this.bedNumbers.length; i++) {
        if (this.roomNumbers[i].idBuildings === this.buildingData[index].idBuildings) { n0 = this.bedNumbers[i].bedNumber; break }
      }
      return n0
    },
    passValue () {
      this.extraInfo.yqBuildings = this.ruleForm.yq
      this.extraInfo.nameBuildings = this.ruleForm.name
      this.extraInfo.floorsBuildings = this.ruleForm.floor
      this.extraInfo.objectBuildings = this.ruleForm.liver
      this.extraInfo.genderBuildings = this.ruleForm.gender
      this.extraInfo.typeBuildings = this.ruleForm.type
      this.extraInfo.phonenumBuildings = this.ruleForm.telephone
      this.extraInfo.wydwxxBuildings = this.ruleForm.REC
      this.extraInfo.bdmanagerBuildings = this.ruleForm.M_name
      insertBuildings(this.extraInfo)
    },

    quitdl () {
      this.dialogFormVisible = false
      location.reload()
    },

    handleSizeChange: function (size) {
      this.query.pagesize = size
      this.getBuildingList()
    },
    handleCurrentChange: function (currentPage) {
      this.query.pageNo = currentPage
      this.getBuildingList()
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('修改成功！')
          this.passValue()
          location.reload()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  },
  created () {
    this.getBuildingList()
    this.getRoomNumber()
    this.getBedNumber()
    this.getYqList()
  }
}
</script>
<style lang="less" scoped>
@import "../../../../assets/styles/pages";
.demo-ruleForm .el-input{
    --el-input-width: 146px;
    --el-input-height: 32px;
}
.demo-ruleForm .el-select {
    --el-select-width: 146px;
    --el-select-height: 32px;
}
.input1{
    width: 100%;
}
.btn2{
    display: flex;
    justify-content: flex-end;
}
.m{
    border: 1px solid #275ce6;
}
.el-form-item__label {
    color: #f78b89;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
}
.btn3{
    margin-top: 16px;
    width: 90px;
    border-radius: 5px;
    background: #275ce6;
    position: absolute;
    right: 16px;
}
.temptx{
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.19px;
    text-align: left;
    color: #fff;
}
</style>
